<template>
  <div>
    <a-modal v-model:visible="visible" :footer="false" width="600px">
      <a-form-item>
        <div class="flex flex-col">
          <div class="flex">
            <img :src="getImage(item)" v-for="item in keys" class="w-[200px]" />
          </div>
          <div class="mt-3">
            <a-date-picker v-model="time" show-time> </a-date-picker>
            <a-button type="primary" :disabled="!time" @click="confirm">
              {{ t["确定"] }}
            </a-button>
          </div>
        </div>
      </a-form-item>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { mediaLink } from "@/api/service/lcd-device/lcd-device";

import { keys, table } from "../data/table";

const t = translate("公共模块");

const getImage = (id: string) => {
  const result = table.value.data.find((v) => {
    if (v.mediaId === id) {
      return v;
    }
    return null;
  });
  return result?.uri || "";
};

const visible = defineModel<boolean>();
const time = ref();
const confirm = async () => {
  await mediaLink({
    datetime: time.value,
    mediaIds: keys.value
  });
  time.value = "";
  visible.value = false;
};
</script>

<style lang="scss" scoped></style>
